Skip to content

content: Add support for keyword highlighting in code blocks #1707

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

Conversation

rajveermalviya
Copy link
Member

@rajveermalviya rajveermalviya commented Jul 16, 2025

Fixes: #1695

Screenshots when commits based on top of #1694:

Flutter Web
image image

But only allowing a single element for now, making the diff for
content tests simpler for the later commit which implements support
for multiple span types.

Also better formatting for code block HTML in content tests.
The code block spans with `hll` (and `highlight` used for search
keyword highlighting) classes can be nested inside other types of
code block spans. So add support for parsing those types of spans.

The rendered text style will be result of merging all the
corresponding `TextStyle` using `TextStyle.merge`, preserving the
order of those nested spans.
@rajveermalviya rajveermalviya force-pushed the pr-codeblock-highlight branch from c79bf5b to 2c8fe02 Compare July 17, 2025 01:15
@rajveermalviya
Copy link
Member Author

Changed the base from #1694 to main as it doesn't really depend on it, and can be reviewed independently.

@rajveermalviya rajveermalviya added the integration review Added by maintainers when PR may be ready for integration label Jul 17, 2025
@rajveermalviya rajveermalviya requested a review from gnprice July 17, 2025 01:20
@rajveermalviya
Copy link
Member Author

Sent #1737 as the tree based version of this implementation, and it turns out to be much faster than this PR.
Following timings were taken by opening this message from Topic List page.

Flat list (this PR)

I/flutter (24302): parseCodeBlock took 8416us
I/flutter (24302): CodeBlock.build took 120693us
I/flutter (24302): parseCodeBlock took 16335us
I/flutter (24302): CodeBlock.build took 133730us
I/flutter (24302): parseCodeBlock took 15678us
I/flutter (24302): CodeBlock.build took 133539us
I/flutter (24302): parseCodeBlock took 13075us
I/flutter (24302): CodeBlock.build took 126316us
I/flutter (24302): parseCodeBlock took 17112us
I/flutter (24302): CodeBlock.build took 142327us
I/flutter (24302): parseCodeBlock took 11670us
I/flutter (24302): CodeBlock.build took 125222us
I/flutter (24302): parseCodeBlock took 17423us
I/flutter (24302): CodeBlock.build took 140155us
I/flutter (24302): parseCodeBlock took 12040us
I/flutter (24302): CodeBlock.build took 126162us
I/flutter (24302): parseCodeBlock took 16266us
I/flutter (24302): CodeBlock.build took 133417us
I/flutter (24302): parseCodeBlock took 12020us
I/flutter (24302): CodeBlock.build took 126685us

Tree (#1737)

I/flutter (25604): parseCodeBlock took 1542us
I/flutter (25604): CodeBlock.build took 192us
I/flutter (25604): parseCodeBlock took 1401us
I/flutter (25604): CodeBlock.build took 228us
I/flutter (25604): parseCodeBlock took 1884us
I/flutter (25604): CodeBlock.build took 207us
I/flutter (25604): parseCodeBlock took 1772us
I/flutter (25604): CodeBlock.build took 211us
I/flutter (25604): parseCodeBlock took 1993us
I/flutter (25604): CodeBlock.build took 235us
I/flutter (25604): parseCodeBlock took 2388us
I/flutter (25604): CodeBlock.build took 362us
I/flutter (25604): parseCodeBlock took 1716us
I/flutter (25604): CodeBlock.build took 219us
I/flutter (25604): parseCodeBlock took 2008us
I/flutter (25604): CodeBlock.build took 366us
I/flutter (25604): parseCodeBlock took 2239us
I/flutter (25604): CodeBlock.build took 373us
I/flutter (25604): parseCodeBlock took 1720us
I/flutter (25604): CodeBlock.build took 262us

@gnprice
Copy link
Member

gnprice commented Jul 23, 2025

OK — thanks for making those measurements! That's a big effect, so glad we did.

Specifically that looks like around 15ms parsing, and 130ms rendering, each of which is longer than a frame (which can be as short as ~8ms). And the other version is about 2ms total, much shorter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
integration review Added by maintainers when PR may be ready for integration
Projects
None yet
Development

Successfully merging this pull request may close these issues.

search: Highlight keyword matches in code blocks
2 participants